const path = require('path')
// const webpack=require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const IncludeAssets= require('html-webpack-include-assets-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const glob = require('glob')           //需要同步检查html模板，所以我们需要引入node的glob对象使用
const PurifyCssPlugin = require('purifycss-webpack')

// 获取html-webpack-plugin参数的方法
let getHtmlConfig = function(name, title) {
  return {
    // 模板文件
    template: './src/views/' + name + '.html',
    // 目标文件（output）
    filename: name + '.html',
    // html的title
    title: title,
    // 静态资源注入
    inject: true,
    hash: true,
    // 通用模块和自身对应的模块 chunks代码块
    chunks: ['common', name],
    minify: { //是对html文件进行压缩
      // removeAttributeQuotes: true   //removeAttrubuteQuotes是去掉属性的双引号
    }
  }
}
// let website ={  // 这里的IP和端口，是你本机的ip或者是你devServer配置的IP和端口。
//   publicPath:"http://localhost:8088/"
//   // publicPath:"http://192.168.1.103:8888/"
// }

module.exports = {
  // mode: 'production',
  entry: {
    home:'./src/pages/home/index.js'
  },

  output: {
    path: path.resolve(__dirname, '../dist'),
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].js'
  },
  
  // resolve: {
  //   extensions:['.js', '.json'],
  //   alias: {
  //     '@': path.resolve('src'),
  //     'static': path.resolve('static')
  //   }
  // },
  module: {
    rules: [
      // css-loader
      // {
      //   test: /\.css$/,
      //   use: [
      //     {loader: 'style-loader'},
      //     {loader: 'css-loader'}
      //   ]
      // },
      {
        test: /\.css$/,
        use: [
          {loader: process.env.NODE_ENV !== 'development'
              ? MiniCssExtractPlugin.loader
              :'style-loader',
            options: {
              publicPath: '../'
            }},
          // {loader: MiniCssExtractPlugin.loader},
          // {loader: 'style-loader'},
          {loader: "css-loader"},
          {
            loader: "postcss-loader",
            options: {
              ident: 'postcss',
              plugins: [ require("autoprefixer") ],
              broswer: 'last 85 versions'
            }
          },
        ]
      },
      {
        test: /\.(png|jpg|git|jepg)/i,
        use: [{
          loader: 'url-loader',
          options: {
            limit: 5,              //是把小于5000B的文件打成Base64的格式，写入JS
            name: '[name].[ext]',
            outputPath: 'image/',
          }
        }]
      },
      {
        test: /\.(woff|svg|eot|ttf)/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/',
          }
        }]
      },
      {
        test: /\.(htm|html)$/i,
        use: ['html-withimg-loader']
      },
      {
        test:/\.(jsx|js)$/,
        use:{
          loader:'babel-loader',
          options:{
            presets:[
              "env"
            ]
          }
        },
        exclude:/node_modules/
      }
    ]
  },

  plugins: [
    require('autoprefixer'),
    // new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin(getHtmlConfig('home','首页')),
    // new PurifyCssPlugin({
    //   //找html模板，purifycss根据这个配置会遍历你的文件，查找哪些css被使用了。
    //   paths: glob.sync(path.join(__dirname, 'src/*.html'))
    // }),
    new IncludeAssets({
      assets:['static/swiper.css', 'static/swiper.min.js', 'static/jquery-3.1.1.min.js'],
      append:false
    }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: 'static',
        ignore: ['.*']
      }
    ]),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: "[id].css"
    }),


  ],
  optimization:{
    // runtimeChunk:true,
    splitChunks:{
      cacheGroups:{
        chunks:'all',
        // vendor:{
        //   test:/[\\/]node_modules[\\/]/,
        //   name:'vendors',
        //   chunks:'all'
        // }
      }
    }
  },
  // devServer: {
  //   // 设置基本目录结构
  //   contentBase: path.resolve(__dirname, './dist'),
  //   // publicpath: '../dist',
  //   host: 'localhost',
  //   // 服务端压缩
  //   compress: true,
  //   hot: true,
  //   // 端口
  //   port: 8088
  // }
}

